<template>
  <div class="temp-select-body">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-scrollbar style="height: 250px;overflow-y: auto;overflow-x:hidden;">
          <tree
            :nodes="nodes"
            :setting="setting"
            @onClick="onClick"
            @onCheck="onCheck"
            @onCreated="handleCreated"
          />
        </el-scrollbar>
      </el-col>
      <el-col :span="12">
        <el-input
          v-model="blurry"
          size="mini"
          placeholder="请输入内容"
        >
          <i slot="suffix" class="el-input__icon el-icon-search" />
        </el-input>
        <div class="line" style="width: 100%;height: 2px;background-color: #eeeeee;border-radius: 1px">&nbsp;</div>
        <el-scrollbar style="height: 220px;overflow-y: auto;overflow-x:hidden;">
          <div class="content-body">
            <div v-for="item in dataList" :key="item.id" class="content-li">
              <div class="li-title">
                <div class="custom-icon"><i style="color: #409EFF" class="iconfont icon-iconfont icon-a-template1-fill" /></div>
                {{ item.name }}
              </div>
              <div class="li-button"><el-button type="text" @click="doAdd(item)">添加</el-button></div>
            </div>
          </div>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import tree from 'vue-giant-tree';
import { queryAllBlurry } from '@/api/portal/manager/child';
import { queryAllDlByPc, queryAllByFl } from '@/api/portal/manager/columnTemp';
export default {
  name: 'PortalNewTempSelect',
  components: { tree },
  props: {
    exists: String
  },
  data() {
    return {
      blurry: '',
      nodes: [],
      setting: {
        view: {
          showIcon: false,
          showLine: true
        },
        data: { simpleData: {
          // 是否使用简单数据模式
          enable: true,
          // 树节点id，一般是后台数据库主键
          idKey: 'id',
          // 父级id
          pIdKey: 'pid',
          rootPId: '0'
        }}
      },
      dataList: [],
      query: {
        kypt: 'app',
        fl: null,
        dl: null,
        mbdl: this.exists
      }
    };
  },
  methods: {
    onClick(evt, treeId, treeNode) {
      if (treeNode.id.indexOf('-') !== -1) {
        const obj = treeNode.id.split('-');
        this.query.dl = null;
        this.query.fl = parseInt(obj[1]);
      } else {
        this.query.dl = parseInt(treeNode.id);
      }
      this.initData();
    },
    onCheck(evt, treeId, treeNode) {

    },
    handleCreated(zTreeObject) {
    },
    initData() {
      this.dataList = [];
      if (this.query.dl !== null) {
        queryAllDlByPc({ dl: this.query.dl }).then(res => {
          const { data } = res;
          if (undefined !== data && data !== null) {
            this.dataList = data;
          }
        });
      } else {
        queryAllByFl(this.query).then(res => {
          const { data } = res;
          if (undefined !== data.data && data.data !== null) {
            this.dataList = data.data;
          }
        });
      }
    },
    reset() {
      this.nodes = [];
      this.query = {
        kypt: 'app',
        fl: null,
        dl: null
      };
      queryAllBlurry().then(res => {
        const { data } = res;
        if (undefined !== data && data !== null) {
          if (undefined !== data.data && data.data !== null && data.data.length > 0) {
            data.data.forEach(item => {
              const child = { id: item.parent.id + '-' + item.id, pid: item.parent.id + '', name: item.name };
              const parent = { id: item.parent.id + '', pid: '0', name: item.parent.name };
              this.nodes.push(child);
              let flag = false;
              this.nodes.forEach(item => {
                if (item.id === parent.id) {
                  flag = true;
                }
              });
              if (flag === false) {
                this.nodes.push(parent);
              }
            });
          }
        }
      }).catch(() => {
        this.nodes = [];
      });
      this.initData();
    },
    doAdd(data) {
      this.$emit('selected', data);
      document.body.click();
    }
  }
};
</script>

<style scoped>
.temp-select-body {
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
.search-query {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.content-body {
  width: 100%;
  height: auto;
}
.content-li {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex-flow:row nowrap;
}
.li-title{
  flex: 1 1 auto;
  text-align: left;
  text-indent: 30px;
  position: relative;
}
.li-button {
  width: 40px;
  flex: 0 1 auto;
  text-align: center;
}
.custom-icon {
  position: absolute;
  left: -25px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  top: 0px;
}
</style>
